<template>
  <div class="address_edit">
    <!-- 直接使用Vant地址编辑组件，具体用法参见官网 -->
    <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete">
      <div slot="default" class="tips">
        提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认。
      </div>
    </van-address-edit>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { areaList } from "@vant/area-data";
import { getAddressDetailByIdAPI, saveAddressAPI, deleteAddressByIdAPI } from "@/api/address.js";

export default {
  data() {
    return {
      id: parseInt(this.$route.query.id) || 0, // 注意路由传参的方式
      areaList, // 地区列表
      // addressInfo数据结构参见官网文档AddressEditInfo类型
      addressInfo: {
        // 收货人信息初始值
        id: "", // 每条地址的唯一标识
        name: "", // 姓名
        tel: "", // 电话
        province: "", // 省份
        city: "", // 城市
        county: "", // 区县
        areaCode: "", // 地区编码，通过省市区选择获取（必填）
        postalCode: "", // 邮政编码
        addressDetail: "", // 详细地址
        isDefault: false, // 是否选择默认
      },
    };
  },
  // 生命周期调用
  created() {
    this.getAddressDetail();
  },
  methods: {
    // 根据id获取地址数据
    getAddressDetail() {
      if (!this.id) {
        console.log(this.id); // 调使输出 id==0 则是新增 否则是编辑
        return;
      }
      // 调用接口，获取登录用户的收货地址
      getAddressDetailByIdAPI(this.id).then(result => {
        this.addressInfo.id = result.data.id;
        this.addressInfo.name = result.data.name;
        this.addressInfo.tel = result.data.tel;
        this.addressInfo.province = result.data.province;
        this.addressInfo.city = result.data.city;
        this.addressInfo.county = result.data.county;
        this.addressInfo.areaCode = result.data.area_code;
        this.addressInfo.postalCode = result.data.postal_code;
        this.addressInfo.addressDetail = result.data.address_detail;
        this.addressInfo.isDefault = result.data.is_default == 1 ? true : false;
      }).catch(() => {});
    },

    // 处理保存地址
    onSave(content) {
      // 准备参数，参数属性名参见接口文档
      let params = {};
      params.id = content.id;
      params.name = content.name;
      params.tel = content.tel;
      params.province = content.province;
      params.city = content.city;
      params.county = content.county;
      params.area_code = content.areaCode;
      params.postal_code = content.postalCode;
      params.address_detail = content.addressDetail;
      params.is_default = content.isDefault == true ? 1 : 0;
      // 调用接口
      saveAddressAPI(params).then(result => {
        showToast(result.msg); // 地址修改成功
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      });
    },

    // 处理删除地址
    onDelete(content) {
      let id = content.id;
      if (!id) return;
      // 调用接口
      deleteAddressByIdAPI(id).then(result => {
        showToast(result.msg); // 删除成功
        setTimeout(() => {
          this.$router.go(-1); // 页面跳转
        }, 1000);
      });
    },
  },
};
</script>

<style scoped lang="less">
// 定义浅粉色系相关颜色变量
@bgColor: #FFE4E1; // 浅粉色背景色
@mainColor: #FF69B4; // 主要强调色，如按钮等颜色
@textColor: #666; // 文字主色
@lightBg: #FFF5F7; // 更浅的背景色

.address_edit {
  background-color: @lightBg; // 页面整体背景色
  min-height: 100vh;
  padding: 15px;

  /deep/.van-address-edit {
    border-top: 5px solid @bgColor;
    position: relative;
    background-color: white; // 组件内背景为白色，与浅粉色系协调
    border-radius: 8px; // 增加圆角，让组件外观更柔和
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.2); // 增加阴影，突出立体感
    margin-bottom: 15px;

    .van-address-edit__title {
      color: @mainColor; // 标题颜色
      font-weight: 500;
      padding: 12px;
      border-bottom: 1px solid @bgColor; // 添加底部边框
    }

    .van-address-edit__form {
      padding: 0 12px;
    }

    .van-address-edit__buttons {
      margin-top: 20px; // 调整按钮与表单距离
      display: flex;
      justify-content: space-around; // 按钮左右分布
      align-items: center;
      padding: 15px;
      background-color: @lightBg; // 按钮区域背景色

      .van-button {
        padding: 10px 16px;
        border-radius: 20px; // 更圆润的按钮
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(255, 105, 180, 0.2); // 按钮阴影
      }

      .van-button--danger {
        background: @mainColor;
        border-color: @mainColor;
        color: white;
        &:active {
          background: darken(@mainColor, 10%); // 点击效果
        }
      }

      .van-button--default {
        color: @mainColor;
        border-color: @mainColor;
        &:active {
          background-color: @bgColor; // 点击效果
        }
      }
    }

    .tips {
      padding: 12px;
      font-size: 12px;
      color: @mainColor; // 提示文字使用强调色
      background-color: @bgColor; // 提示区域背景色
      border-radius: 4px;
      margin: 12px;
      line-height: 1.5; // 增加行高，提高可读性
    }
  }

  // 优化Vant组件内元素样式
  /deep/.van-field__label {
    color: @textColor;
  }

  /deep/.van-cell {
    padding: 15px 12px; // 调整单元格内边距
  }

  /deep/.van-radio__icon--checked .van-icon {
    background-color: @mainColor;
    border-color: @mainColor;
  }
}
</style>